doctype
html
  head
    meta(charset="utf-8")
    meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui")
    meta(name='apple-mobile-web-app-capable', content='yes')
    meta(name="apple-mobile-web-app-status-bar-style", content="black")
    title My App
    // Path to Framework7 Library CSS
    link(rel="stylesheet", href="../../dist/css/framework7.ios.min.css")
    // Path to your custom app styles
    link(rel="stylesheet", href="css/my-app.css")
  body
    // Status bar overlay for fullscreen mode
    .statusbar-overlay
      
    // Panels overlay
    .panel-overlay
    // Left panel with reveal effect
    .panel.panel-left.panel-reveal
      .content-block
        p Left panel content goes here
    // Right panel with cover effect
    .panel.panel-right.panel-cover
      .content-block
        p Right panel content goes here

    // Views, and they are tabs
    // We need to set "toolbar-through" class on it to keep space for our tab bar
    .views.tabs.toolbar-through
      // Your first view, it is also a .tab and should have "active" class to make it visible by default
      .view.view-main.tab.active#view-1
        // Pages
        .pages
          // Page, data-page contains page name
          .page(data-page="index-1")
            // Scrollable page content
            .page-content
              .content-block-title Welcome
              .content-block
                p This is an example of tab bar application layout. The main point of such tabbed layout is that each tab contains independent view with its own routing and navigation.
                p Each tab/view may have different layout, different navbar type (dynamic, fixed or static) or without navbar like this tab.
                p And of course, your favorite panels are still here: 
                  a(href="#").open-panel left
                  |  and  
                  a(href="#", data-panel="right").open-panel right
                p Icons and their labels in tab bar below are just for example and don't related to their content.
      // Second view (for second wrap)
      .view.tab#view-2
        // We can make with view with navigation, let's add Top Navbar
        .navbar
          .navbar-inner
            .center.sliding Second View
        .pages.navbar-through
          .page(data-page="index-2")
            .page-content
              .content-block
                p This is a second view. Lets, for example, have here some internal pages with navbar navigation
              .list-block
                ul
                  li
                    a(href="about.html").item-link
                      .item-content
                        .item-inner 
                          .item-title About Us
                  li
                    a(href="services.html").item-link
                      .item-content 
                        .item-inner
                          .item-title Services
      .view.tab#view-3
        .pages
          .page(data-page="index-3")
            .page-content
              .content-block-title Another plain static view
              .content-block
                p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel commodo massa, eu adipiscing mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ultricies dictum neque, non varius tortor fermentum at. Curabitur auctor cursus imperdiet. Nam molestie nisi nec est lacinia volutpat in a purus. Maecenas consectetur condimentum viverra. Donec ultricies nec sem vel condimentum. Phasellus eu tincidunt enim, sit amet convallis orci. Vestibulum quis fringilla dolor.    
                p Mauris commodo lacus at nisl lacinia, nec facilisis erat rhoncus. Sed eget pharetra nunc. Aenean vitae vehicula massa, sed sagittis ante. Quisque luctus nec velit dictum convallis. Nulla facilisi. Ut sed erat nisi. Donec non dolor massa. Mauris malesuada dolor velit, in suscipit leo consectetur vitae. Duis tempus ligula non eros pretium condimentum. Cras sed dolor odio.
                p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel commodo massa, eu adipiscing mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ultricies dictum neque, non varius tortor fermentum at. Curabitur auctor cursus imperdiet. Nam molestie nisi nec est lacinia volutpat in a purus. Maecenas consectetur condimentum viverra. Donec ultricies nec sem vel condimentum. Phasellus eu tincidunt enim, sit amet convallis orci. Vestibulum quis fringilla dolor.    

      .view.tab#view-4
        .pages.navbar-fixed
          .page(data-page="index-4")
            .navbar
              .navbar-inner
                .center Settings
            .page-content
              .list-block
                ul
                  li
                    .item-content
                      .item-media
                        i.icon.icon-form-name
                      .item-inner 
                        .item-title.label Name
                        .item-input
                          input(type="text", placeholder="Your name")
                  li
                    .item-content
                      .item-media
                        i.icon.icon-form-email
                      .item-inner 
                        .item-title.label E-mail
                        .item-input
                          input(type="email", placeholder="E-mail")
                  li
                    .item-content
                      .item-media
                        i.icon.icon-form-url
                      .item-inner 
                        .item-title.label URL
                        .item-input
                          input(type="url", placeholder="URL")
                  li
                    .item-content
                      .item-media
                        i.icon.icon-form-password
                      .item-inner 
                        .item-title.label Password
                        .item-input
                          input(type="password", placeholder="Password")
                  li
                    .item-content
                      .item-media
                        i.icon.icon-form-tel
                      .item-inner 
                        .item-title.label Phone
                        .item-input
                          input(type="tel", placeholder="Phone")
                  li
                    .item-content
                      .item-media
                        i.icon.icon-form-gender
                      .item-inner 
                        .item-title.label Gender
                        .item-input
                          select
                            option Male
                            option Female
                  li
                    .item-content
                      .item-media
                        i.icon.icon-form-calendar
                      .item-inner 
                        .item-title.label Birth date
                        .item-input
                          input(type="date", placeholder="Birth day", value="2014-04-30")
                  li
                    .item-content
                      .item-media
                        i.icon.icon-form-toggle
                      .item-inner 
                        .item-title.label Switch
                        .item-input
                          label.label-switch
                            input(type="checkbox")
                            .checkbox
                  li
                    .item-content
                      .item-media
                        i.icon.icon-form-settings
                      .item-inner
                        .item-title.label Slider
                        .item-input
                          .range-slider
                            input(type="range", min="0", max="100", value="50", step="0.1")
              .content-block
                p Mauris commodo lacus at nisl lacinia, nec facilisis erat rhoncus. Sed eget pharetra nunc. Aenean vitae vehicula massa, sed sagittis ante. Quisque luctus nec velit dictum convallis. Nulla facilisi. Ut sed erat nisi. Donec non dolor massa. Mauris malesuada dolor velit, in suscipit leo consectetur vitae. Duis tempus ligula non eros pretium condimentum. Cras sed dolor odio.
      // Bottom Tabbar
      .toolbar.tabbar.tabbar-labels
        .toolbar-inner
          a(href="#view-1").tab-link.active 
            i.icon.tabbar-demo-icon-1
            span.tabbar-label Information
          a(href="#view-2").tab-link
            i.icon.tabbar-demo-icon-2
            span.tabbar-label Inbox
          a(href="#view-3").tab-link 
            i.icon.tabbar-demo-icon-3
              span.badge.bg-red 4
            span.tabbar-label Upload
          a(href="#view-4").tab-link 
            i.icon.tabbar-demo-icon-4
            span.tabbar-label Photos

    // Path to Framework7 Library JS
    script(type="text/javascript", src="../../dist/js/framework7.min.js")
    // Path to your app js
    script(type="text/javascript", src="js/my-app.js")
